<template>
  <component
    :is="search.render ?? `el-${search.el}`"
    v-bind="{ ...search.props, ...otherProps, searchParam }"
    v-model.trim="searchParam[search.key ?? column.prop]"
  >
    <template v-if="search.el !== 'cascader'" #default>
      <template v-if="search.el === 'select'">
        <component
          :is="`el-option`"
          v-for="(dict, index) in column.options"
          :key="index"
          :label="dict.label"
          :value="dict.value"
        ></component>
      </template>
      <slot v-else></slot>
    </template>
  </component>
</template>

<script setup>
const props = defineProps({
  column: {
    type: Object,
    default: () => ({})
  },
  searchParam: {
    type: Object,
    default: () => ({})
  }
})

const search = reactive(props.column.search)

const otherProps = computed(() => {
  if (['datetimerange', 'daterange', 'monthrange'].includes(search?.props?.type) || search?.props?.isRange) {
    return {
      rangeSeparator: search?.props?.rangeSeparator ?? '至',
      startPlaceholder: search?.props?.startPlaceholder ?? '开始时间',
      endPlaceholder: search?.props?.endPlaceholder ?? '结束时间',
      defaultTime: reactive([new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]),
      valueFormat: 'x'
    }
  }
  const placeholder = search.props?.placeholder ?? ((search?.el?.includes('input') ? '请输入' : '请选择') + (props.column.search.label ?? props.column.label))
  return { placeholder }
})

/* watchEffect(() => {
  if (['datetimerange', 'daterange', 'monthrange'].includes(search?.props?.type) || search?.props?.isRange) {
    props.searchParam[`start${search.key}`] = props.searchParam[search.key ?? props.column.prop]?.[0]
    props.searchParam[`end${search.key}`] = props.searchParam[search.key ?? props.column.prop]?.[1]
  }
}) */
</script>
